<template>

    <van-nav-bar title="搜索" left-arrow @click-left="() => { $router.push('/') }" fixed />
    <div style="height: 45px;"></div>

    <van-search v-model="searchVal" shape="round" placeholder="请输入搜索关键词" />

    <div class="box" v-show="!hisStatus">
        <van-cell-group v-for="item in qsearchApiData">
            <van-cell :title="item.goods_name" />
        </van-cell-group>
    </div>
    <van-empty image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
        description="暂无搜索数据" v-show="kongStatus" />
    <div class="history" v-show="hisStatus">
        <div class="hot">
            <h4>热门搜索</h4>
            <van-tag type="primary" size="large">电视</van-tag>
            <van-tag type="primary" size="large">电视</van-tag>
            <van-tag type="primary" size="large">电视</van-tag>
            <van-tag type="primary" size="large">电视</van-tag>
            <van-tag type="primary" size="large">电视</van-tag>
            <van-tag type="primary" size="large">电视</van-tag>
            <van-tag type="primary" size="large">电视</van-tag>
            <van-tag type="primary" size="large">电视</van-tag>
        </div>
        <div class="his">
            <h4>历史搜索</h4>
            <van-tag type="primary" size="large">电视</van-tag>
            <van-tag type="primary" size="large">电视</van-tag>
            <van-tag type="primary" size="large">电视</van-tag>
            <van-tag type="primary" size="large">电视</van-tag>
        </div>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue';
//引入搜索接口数据
import { qsearchApi } from '@/api/api'
//自定义搜索后的数据
let qsearchApiData = ref([])
// 自定义搜索的监听数据
let searchVal = ref('')
// 自定义状态 -- 排版区域是否显示和隐藏
let hisStatus = ref(true)
//空状态
let kongStatus = ref(false)
//引入lodash
import _ from 'lodash'

// 监听数据
watch(searchVal,
    //防抖
    _.debounce((val) => {
        console.log(val.length);

        if (val.length == 0) {
            hisStatus.value = true
            //空状态
            kongStatus.value = false;
        } else {
            // 开始搜索数据
            hisStatus.value = false
            qsearchApi(val).then(res => {
                console.log('搜索数据', res)
                qsearchApiData.value = res.data.message
                if (res.data.message.length == 0) {
                    kongStatus.value = true
                } else {
                    kongStatus.value = false
                }
            })
        }
    }, 2000)
)

</script>

<style lang="scss" scoped></style>